<template>
  <!-- 答题 -->
  <div class="vote">
    <div class="votediv">
      <div class="vote-line"></div>
      <div class="vote-close"></div>
      <div id="vote1">
        <div class="vote-icon"></div>
        <h3>请选择答案</h3>
        <div class="vote-tips">题干部分请参考文档或直播视频</div>
        <ul class="vote-option"></ul>
      </div>
      <div id="vote2">
        <div class="vote-icon2"></div>
        <h3>答题统计</h3>
        <div class="vote-tips">答题结束，共<span id="vote-count"></span>人回答。</div>
        <div class="vote-a">
          <span id="yansw">您的答案:<em></em></span>
          <span id="cansw" class="vote-righta">正确答案:<em></em></span>
        </div>
        <ul class="vote-list"></ul>
      </div>
    </div>
    <div class="maskbg"></div>
  </div>
</template>

<script>
const HDScene = window.liveHDScene
export default {
  methods: {
    addEvents() {
      let option = ''
      let voteOptions = []
      // 答题
      HDScene.onStartVote({
        callback: data => {
          let voteid = data.voteId
          let pid = data.publisherId
          let count = data.voteCount
          let voteType = data.voteType

          if (count == 5) {
            $('.vote-option').append(
              '<li>A<span></span></li><li>B<span></span></li><li>C<span></span></li><li>D<span></span></li><li>E<span></span></li>'
            )
            $('.vote-option').css('padding-left', 10)
            $('.vote-option li').css('margin-right', 7)
            $('.vote-option li:last-child').css('margin-right', 0)
            $('#vote1').append('<div class="votebtn"><button>提交</button></div>')
          }
          if (count == 4) {
            $('.vote-option').append(
              '<li>A<span></span></li><li>B<span></span></li><li>C<span></span></li><li>D<span></span></li>'
            )
            $('.vote-option').css('padding-left', 28)
            $('.vote-option li').css('margin-right', 15)
            $('#vote1').append('<div class="votebtn"><button>提交</button></div>')
          }
          if (count == 3) {
            $('.vote-option').append(
              '<li>A<span></span></li><li>B<span></span></li><li>C<span></span></li>'
            )
            $('.vote-option').css('padding-left', 50)
            $('.vote-option li').css('margin-right', 25)
            $('#vote1').append('<div class="votebtn"><button>提交</button></div>')
          }
          if (count == 2) {
            $('.vote-option').append('<li>A<span></span></li><li>B<span></span></li>')
            $('.vote-option li')
              .eq(0)
              .addClass('vote-r')
            $('.vote-option li')
              .eq(1)
              .addClass('vote-w')
            $('.vote-option').css('padding-left', 80)
            $('.vote-option li').css('margin-right', 40)
            $('#vote1').append('<div class="votebtn"><button>提交</button></div>')
          }
          $('.vote-option li:last-child').addClass('last-item')
          $('.vote').show()
          $('#vote1').show()
          $('#vote2').hide()
          $('.vote-list').empty()
          $('.vote-option li').click(function() {
            var index = $('.vote-option li').index(this)
            if (voteType == 1) {
              // 多选题
              if ($(this).hasClass('active')) {
                $(this).removeClass('active')
              } else {
                $(this).addClass('active')
              }

              voteOptions = []
              $('.vote-option li').each(function(index, data) {
                if ($(data).hasClass('active')) {
                  voteOptions.push(index)
                }
              })
            } else {
              $(this)
                .addClass('active')
                .siblings()
                .removeClass('active')
            }

            $('.votebtn button').css('opacity', 1)
            option = index
          })
          $('.votebtn button').click(function() {
            if ($('.vote-option li').hasClass('active')) {
              if (voteType == 1) {
                // 多选题
                HDScene.replyVote(voteid, voteOptions, pid)
              } else {
                HDScene.replyVote(voteid, option, pid)
              }

              $('.vote').hide()
              $('.vote-option').empty()
              $('.votebtn button').css('opacity', 0.6)
              $('.votebtn').remove()
            }
          })
          $('.vote-close').click(function() {
            $('.vote').hide()
            $('.vote-option, .vote-list').empty()
            $('.votebtn button').css('opacity', 0.6)
            option = ''
            voteOptions = []
            $('.votebtn').remove()
          })
        }
      })

      // 结束答题
      HDScene.onStopVote({
        callback: () => {
          $('.vote').hide()
          $('.vote-option, .vote-list').empty()
          $('.votebtn button').css('opacity', 0.6)
          $('.votebtn').remove()
        }
      })

      // 答题统计
      HDScene.onVoteResult({
        callback: data => {
          console.log(data)
          // 选项个数
          var count = data.voteCount
          // 正确答案 数字或者数组
          var coption = data.correctOption
          // 多选题目
          var isMultiple = !(typeof coption === 'number')
          // 判断题目
          var isJudge = count == 2

          var statisics = data.statisics
          var zcount = ''

          // 总回答人数
          var answerCount = data.answerCount

          // 正确内容
          var correctAnswer = ''
          var selfAnswer = ''

          if (isMultiple) {
            var ccs = []
            $.each(coption, function(index, o) {
              if (o >= 0 && o < 26) {
                ccs.push(String.fromCharCode(65 + o))
              }
            })
            correctAnswer = ccs.join(',')

            var ccs2 = []
            $.each(voteOptions, function(index, o) {
              if (o >= 0 && o < 26) {
                ccs2.push(String.fromCharCode(65 + o))
              }
            })
            selfAnswer = ccs2.join(',')
          } else if (isJudge) {
            if (coption == 0) {
              correctAnswer = '<i class="vote-ricon"></i>'
            } else if (coption == 1) {
              correctAnswer = '<i class="vote-wicon"></i>'
            }

            if ($.isNumeric(option) && option == 0) {
              selfAnswer = '<i class="vote-ricon"></i>'
            } else if ($.isNumeric(option) && option == 1) {
              selfAnswer = '<i class="vote-wicon"></i>'
            }
          } else {
            if ($.isNumeric(coption) && coption >= 0 && coption < 26) {
              correctAnswer = String.fromCharCode(65 + coption)
            }
            if ($.isNumeric(option) && option >= 0 && option < 26) {
              selfAnswer = String.fromCharCode(65 + option)
            }
          }
          var li
          switch (count) {
            case 2:
              li =
                '<li>' +
                '<span class="spanl">√:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[0].count +
                '人</span>' +
                '<span>(' +
                statisics[0].percent +
                '%)</span>' +
                '</li>' +
                '<li class="last-item">' +
                '<span class="spanl">X:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[1].count +
                '人</span>' +
                '<span>(' +
                statisics[1].percent +
                '%)</span>' +
                '</li>'
              $('.vote-list').append(li)
              zcount = statisics[0].count + statisics[1].count
              break
            case 3:
              li =
                '<li>' +
                '<span class="spanl">A:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[0].count +
                '人</span>' +
                '<span>(' +
                statisics[0].percent +
                '%)</span>' +
                '</li>' +
                '<li>' +
                '<span class="spanl">B:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[1].count +
                '人</span>' +
                '<span>(' +
                statisics[1].percent +
                '%)</span>' +
                '</li>' +
                '<li class="last-item">' +
                '<span class="spanl">C:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[2].count +
                '人</span>' +
                '<span>(' +
                statisics[2].percent +
                '%)</span>' +
                '</li>'
              $('.vote-list').append(li)
              zcount = statisics[0].count + statisics[1].count + statisics[2].count
              break
            case 4:
              li =
                '<li>' +
                '<span class="spanl">A:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[0].count +
                '人</span>' +
                '<span>(' +
                statisics[0].percent +
                '%)</span>' +
                '</li>' +
                '<li>' +
                '<span class="spanl">B:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[1].count +
                '人</span>' +
                '<span>(' +
                statisics[1].percent +
                '%)</span>' +
                '</li>' +
                '<li>' +
                '<span class="spanl">C:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[2].count +
                '人</span>' +
                '<span>(' +
                statisics[2].percent +
                '%)</span>' +
                '</li>' +
                '<li class="last-item">' +
                '<span class="spanl">D:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[3].count +
                '人</span>' +
                '<span>(' +
                statisics[3].percent +
                '%)</span>' +
                '</li>'
              $('.vote-list').append(li)
              zcount =
                statisics[0].count + statisics[1].count + statisics[2].count + statisics[3].count
              break
            case 5:
              li =
                '<li>' +
                '<span class="spanl">A:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[0].count +
                '人</span>' +
                '<span>(' +
                statisics[0].percent +
                '%)</span>' +
                '</li>' +
                '<li>' +
                '<span class="spanl">B:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[1].count +
                '人</span>' +
                '<span>(' +
                statisics[1].percent +
                '%)</span>' +
                '</li>' +
                '<li>' +
                '<span class="spanl">C:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[2].count +
                '人</span>' +
                '<span>(' +
                statisics[2].percent +
                '%)</span>' +
                '</li>' +
                '<li>' +
                '<span class="spanl">D:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[3].count +
                '人</span>' +
                '<span>(' +
                statisics[3].percent +
                '%)</span>' +
                '</li>' +
                '<li class="last-item">' +
                '<span class="spanl">E:</span>' +
                '<div class="vote-bar">' +
                '<div class="vote-in"></div>' +
                '</div>' +
                '<span class="color1">' +
                statisics[4].count +
                '人</span>' +
                '<span>(' +
                statisics[4].percent +
                '%)</span>' +
                '</li>'
              $('.vote-list').append(li)
              zcount =
                statisics[0].count +
                statisics[1].count +
                statisics[2].count +
                statisics[3].count +
                statisics[4].count
              break
          }

          for (var i = 0; i < statisics.length; i++) {
            $('.vote-in')
              .eq(i)
              .css('width', statisics[i].percent * 1.2)
          }

          if (isMultiple) {
            // 为了兼容老客户端，单选题和判断的回答人数扔计算得出
            zcount = answerCount
          }

          $('#vote-count').html(zcount)
          // 自己选择的答案
          $('#yansw em').html(selfAnswer)
          // 正确答案
          $('#cansw em').html(correctAnswer)

          if ($('#yansw em').html() == $('#cansw em').html()) {
            $('#yansw').addClass('vote-righta')
          } else {
            $('#yansw').removeClass('vote-righta')
          }

          $('.vote').show()
          $('#vote2').show()
          $('#vote1').hide()
          $('.votebtn').remove()

          option = ''
          window.voteOptions = []
          $('.vote-close').click(function() {
            $('.vote').hide()
            $('.vote-list').empty()
            option = ''
            window.voteOptions = []
          })
        }
      })
    }
  },
  mounted() {
    this.addEvents()
  }
}
</script>

<style>
/*--vote--*/
.vote {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  display: none;
}
.votediv {
  width: 300px;
  z-index: 999;
  height: auto;
  padding: 30px 0 20px 0;
  background: #fff;
  border: 1px solid #5ab3fc;
  border-radius: 4px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5), inset 0px -4px 0px 0px #55b1ff;
  position: absolute;
  top: 32%;
  left: 39%;
}
.vote-icon {
  background: url(~@views/live/cc/assets/images/vote01.png) no-repeat;
  z-index: 999999;
  width: 58px;
  height: 58px;
  background-size: 100%;
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -29px;
}
.votebtn {
  text-align: center;
}
.votebtn button {
  background: #55b1ff;
  border: 1px solid #2d94eb;
  opacity: 0.6;
  border-radius: 100px;
  width: 138px;
  height: 38px;
  line-height: 23px;
  color: #fff;
  font-size: 16px;
}
.vote h3 {
  font-size: 18px;
  color: #55b1ff;
  line-height: 18px;
  margin-bottom: 14px;
  text-align: center;
  font-weight: normal;
}
.vote-tips {
  background: #f4f4f4;
  border-radius: 50px;
  width: 195px;
  height: 24px;
  line-height: 24px;
  color: #999;
  font-size: 12px;
  text-align: center;
  margin: 0 auto;
}
.vote-option {
  margin: 28px 0;
  padding: 0 10px;
}
.vote-option li {
  background: #edf5ff;
  margin-right: 7px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: bold;
  border-radius: 4px;
  width: 50px;
  height: 50px;
  font-size: 36px;
  color: #55b1ff;
  line-height: 50px;
  position: relative;
}

.vote-option li.last-item {
  margin-right: 0;
}
.vote-option .active {
  background: #dbebff;
  border: 1px solid #a3cdf7;
  box-sizing: border-box;
}
.vote-option .active span {
  background: #edf5ff url(~@views/live/cc/assets/images/vote02.png) no-repeat;
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: -6px;
  right: -6px;
}
.vote-option .vote-r {
  background: #edf5ff url(~@views/live/cc/assets/images/vote03.png) no-repeat;
  text-indent: -9999em;
}
.vote-option .vote-w {
  background: #edf5ff url(~@views/live/cc/assets/images/vote04.png) no-repeat;
  text-indent: -9999em;
}
.vote-close {
  background: url(~@views/live/cc/assets/images/vote05.png) no-repeat;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.vote-line {
  background: #55b1ff;
  width: 230px;
  height: 1px;
  position: absolute;
  top: 13px;
  opacity: 0.5;
  left: 32px;
}
.vote-icon2 {
  background: url(~@views/live/cc/assets/images/vote06.png) no-repeat;
  z-index: 999999;
  width: 58px;
  height: 58px;
  background-size: 100%;
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -29px;
}
.vote-a {
  margin: 14px 0 0 0;
  text-align: center;
  font-size: 14px;
  color: #ff6633;
}
.vote-a span {
  margin-right: 10px;
}
.vote-a em {
  font-style: normal;
}
.vote-righta {
  color: #12b88f;
}
.vote-list {
  margin: 10px 0 0 36px;
}
.vote-list li {
  margin-bottom: 10px;
}
.vote-list li span {
  display: inline-block;
  font-size: 12px;
  color: #333;
}
.vote-list li .color1 {
  color: #666;
  margin-right: 4px;
}
.vote-bar {
  display: inline-block;
  margin: 0 5px;
  background: #edf5ff;
  width: 120px;
  height: 14px;
  vertical-align: middle;
}
.vote-in {
  background: #55b1ff;
  height: 100%;
  width: auto;
}
.spanl {
  width: 12px;
  font-weight: bold;
}
.vote-list li.last-item {
  margin-bottom: 0;
}
#vote2 {
  display: none;
}
.vote-ricon {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 4px;
  width: 19px;
  height: 16px;
  background: url(~@views/live/cc/assets/images/vote09.png) no-repeat;
}
.vote-wicon {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 4px;
  width: 19px;
  height: 16px;
  background: url(~@views/live/cc/assets/images/vote10.png) no-repeat;
}
.vote-righta .vote-ricon {
  background: url(~@views/live/cc/assets/images/vote08.png) no-repeat;
}
.vote-righta .vote-wicon {
  background: url(~@views/live/cc/assets/images/vote07.png) no-repeat;
}
</style>
